<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>完美拖拽</title>
    <style type="text/css">
        html,
        body {
            overflow: hidden;
        }

        body,
        div,
        h2,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            color: #fff;
            background: #000;
            font: 12px/2 Arial;
        }

        p {
            padding: 0 10px;
            margin-top: 10px;
        }

        span {
            color: #ff0;
            padding-left: 5px;
        }

        #box {
            position: absolute;
            width: 300px;
            height: 150px;
            background: #333;
            border: 2px solid #ccc;
            top: 50%;
            left: 50%;
            margin: -75px 0 0 -150px;
        }

        #box h2 {
            height: 25px;
            cursor: move;
            background: #222;
            border-bottom: 2px solid #ccc;
            text-align: right;
            padding: 0 10px;
        }

        #box h2 a {
            color: #fff;
            font: 12px/25px Arial;
            text-decoration: none;
            outline: none;
        }
    </style>
    <script type="text/javascript">

        window.onload = function () {
            var box = document.getElementById("box");
            var oTitle = box.getElementsByTagName("h2")[0]; //标题栏，用以添加点击事件
            var posx = document.getElementsByClassName("posx")[0];
            var posy = document.getElementsByClassName("posy")[0];
            var review = oTitle.children[0];
            var tail = [];
           
            oTitle.onmousedown = function (e) {
                var e = e || event,
                    offX = e.offsetX;
                    offY = e.offsetY;
                    console.log("offX:"+offX,"offY:"+offY);
            document.onmousemove = function(e){
                    var _left = e.pageX - offX ;
                    var _top = e.pageY - offY;
                    tail.push({x:_left<0?0:_left,y:_top<0?0:_top});
                   
                    box.style.left= Math.min(Math.max(_left,0),window.innerWidth - box.offsetWidth)+"px";
                    box.style.top= Math.min(Math.max(_top,0),window.innerHeight )+"px";
                    posx.innerHTML = getComputedStyle(box).left;
                    posy.innerHTML =  getComputedStyle(box).top;
                }
            }
            document.onmouseup = function(e){
                document.onmousemove = null;
                }
                review.onclick = function(){
                    var t;
                    t = setInterval(function(){
                        var lastPos = tail.pop();
                        box.style.left= lastPos.x+"px";
                        box.style.top= lastPos.y+"px";
                        if(tail.length == 0){
                            clearInterval(t);
                        }
                    },10)
                }
               
        };
    </script>
</head>

<body>
    <div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
        <h2><a href="javascript:;">点击回放拖动轨迹</a></h2>
        <p><strong>Drag:</strong><span class="isdrag">false</span></p>
        <p><strong>offsetTop:</strong><span class="posx">231</span></p>
        <p><strong>offsetLeft:</strong><span class="posy">533</span></p>
    </div>


</body>

</html>